/*
  学习目标：使用react创建虚拟dom，并且渲染到页面中
  步骤：
- 导入react和react-dom     
- 创建react元素(虚拟DOM) -保存关键信息的JS对象
- 渲染react元素到页面中
*/

// React 负责创建虚拟DOM
import React from 'react';
// ReactDOM 负责渲染 react 元素
import ReactDOM from 'react-dom';

// 与vue3中 h, createVNode 函数作用一样，创建虚拟dom
// 语法： React.createElement(标签,{标签属性:值,标签属性n:值},标签的内容)
// 加入标签没有属性，可以给 null 或者 {},建议使用 {}
const title = React.createElement(
  'div',
  { id: 'box', title: '我是虚拟dom的title' },
  '我是虚拟div'
);
console.log('title -----> ', title);

// 语法： ReactDOM.render(react元素，真实的DOM做挂载点)
ReactDOM.render(title, document.getElementById('root'));
